<template>
  <el-table
    :data='tableData'
    style='width: 100%'
    :row-class-name='tableRowClassName'>
    <el-table-column prop='name' label='标签' width='180'>
      <template slot-scope='scope'>
        <span :class="[scope.row.flag ? 'warning-row' : 'success-row' ]">{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column prop='age' label='标签' width='180'>
      <template slot-scope='scope'>
        <span :class="[scope.row.flag ? 'warning-row' : 'success-row' ]">{{ scope.row.age }}</span>
      </template>
    </el-table-column>
    <el-table-column prop='hobby' label='标签' width='180'>
      <template slot-scope='scope'>
        <span :class="[scope.row.flag ? 'warning-row' : 'success-row' ]">{{ scope.row.hobby }}</span>
      </template>
    </el-table-column>
    <el-table-column prop='msg' label='备注' width='180'>
      <template slot-scope='scope'>
        <el-input v-model='scope.row.msg'  :class="[scope.row.flag ? 'warning-row' : 'success-row' ]"/>
      </template>
    </el-table-column>

  </el-table>
</template>

<script>
export default {

  data() {
    return {
      tableData: [
        {
          name: 'jack',
          age: 20,
          hobby: 'reading',
          msg: '文字',
          flag: true
        },
        {
          name: 'jack',
          age: 20,
          hobby: 'reading',
          msg: '我是文字',
          flag: false
        }
      ]
    }
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      console.log(rowIndex)
      this.tableData.forEach((x, p) => {
        if (rowIndex === p && x.flag) {
          return 'warning-row'
        } else {
          return 'success-row'
        }

      })

    }
  }
}
</script>

<style lang = "scss" scoped>
.el-table .warning-row {
  color: blue;
}

.el-table .success-row {
  color: red;
}

::v-deep .el-input__inner{
  color:inherit;
}
</style>
